<template>
    <div class="subpage platform-message-container">
        <van-list
            v-model="loading"
            :immediate-check="false"
            :finished="finished"
            finished-text="已加载全部了哦～"
            @load="onLoadMore"
        >
            <ul class="platform-message-box" v-if="listData.length > 0">
                <li @click="jumpDetail(item.id)" v-for="(item, index) in listData" :key="index">
                    <p class="message-time">{{item.sendTime}}</p>
                    <div class="message-content">
                        <p>{{item.title}}</p>
                        <p>
                            <span>查看详情</span>
                            <van-icon name="arrow" class="arrow-right" />
                        </p>
                    </div>
                </li>
            </ul>


            <div class="no-data" v-if="listData.length <= 0">
                <img src="../../../assets/img/no_message.png" alt="" v-if="showNoInfo">
                <p v-if="showNoInfo">暂无平台公告哦~</p>
            </div>
        </van-list>
    </div>
</template>

<script>
import { List } from 'vant';
export default {
    components: {
        [List.name]:List
    },
    data() {
        return {
            listData: [],
            pageIndex: 1,
            pageSize: 10,
            showNoInfo: false,
            loading: false,
            finished: false,
        }
    },
    created() {
        this.getListData()
    },
    methods: {
        jumpDetail(id) {
            this.$router.push({
                path: '/my/message/platformMessage/platformMessageDetail/' + id
            })
        },
        getListData() {
            let getData = {
                type: 2,
                pgCt: this.pageIndex,
                pgSz: this.pageSize
            }
            let url = this.pageIndex > 1 ? '/api/imm/getMessageList?noLoading' : '/api/imm/getMessageList';
            this.$api.get(url, getData)
                .then((res) => {
                    this.showNoInfo = res.data.total > 0 ? false : true;
                    if(res.data.records.length > 0){
                        res.data.records.forEach((item) => {
                            item.sendTime = this.$tool.dateFormat(item.sendTime, 2)
                        })
                    }
                    this.listData = this.listData.concat(res.data.records)
                    if(this.pageIndex > 1 && res.data.records.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getListData()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
    }
}
</script>

<style lang="scss" scoped>
    .platform-message-container {
        .platform-message-box {
            width: 100%;
            padding: 0 12px;
            box-sizing: border-box;
            li {
                width: 100%;
                padding-top: 24px;
                box-sizing: border-box;
                .message-time {
                    width: 100%;
                    margin-bottom: 14px;
                    font-size: 12px;
                    color: #969C9E;
                    text-align: center;
                }
                .message-content {
                    width: 100%;
                    padding: 0 16px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    overflow: hidden;
                    background-color: #fff;
                    p:first-child {
                        padding: 16px 0;
                        box-sizing: border-box;
                        color: #344047;
                        border-bottom: 1px solid #f2f2f2;
                    }
                    p:last-child {
                        width: 100%;
                        padding: 16px 0;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        font-size: 12px;
                        color: #969C9E;
                        span {
                            margin-right: 4px;
                        }
                        .arrow-right {
                            font-size: 16px;
                        }
                    }
                }
            }
        }

        .no-data {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            img{
                width: 162px;
                height: 162px;
                margin: -90px auto 14px;
            }
            p {
                color: #969C9E;
            }
        }
    }
</style>